<template>
  <a-modal
    :visible="visible"
    title="教室信息"
    :width="700"
    okText="保存"
    @cancel="() => { $emit('cancel') }"
    @ok="saveForm"
  >
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="教室名称"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-input v-decorator="['classroomNo',
              {
                rules: [{ required: true, message: '请输入教室名称!' }],
              }]" :disabled="!!editId"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="教室位置"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-input v-decorator="['location',
              {
                rules: [{ required: true, message: '请输入教室位置!' }],
              }]" :disabled="showOnly"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="教室类型"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['typeCode',
              {
                rules: [{ required: true, message: '请选择教室类型!' }],
              }]" :disabled="showOnly">
              <a-select-option v-for="i in TYPE0046" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="教室容量"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-input-number :min="1" v-decorator="['capacity',
              {
                rules: [{ required: true, message: '请输入教室位置!' }],
              }]" :disabled="showOnly"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="所属院系"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
          <a-select v-decorator="['deptCode',
            {
              rules: [{ required: true, message: '请选择所属院系!' }],
            }]" showSearch :filterOption="filterOption" :disabled="showOnly">
            <a-select-option v-for="i in selectMenu.yxList" :key="i.id" :value="i.dwh">{{ i.dwh }} {{ i.dwmc }}</a-select-option>
          </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="所在校区"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['jsxq',
              {
                rules: [{ required: true, message: '请选择所在校区!' }],
              }]" :disabled="showOnly">
              <a-select-option v-for="i in selectMenu.campusList" :key="i.id" :value="i.xqbh">{{ i.xqmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="排课优先级"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-input-number :min='0' v-decorator="['priority']" :disabled="showOnly"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="是否可用"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['isUsable',
              {
                rules: [{ required: true, message: '请选择是否可用!' }],
              }]" :disabled="showOnly">
              <a-select-option value="0">不可用</a-select-option>
              <a-select-option value="1">可用</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="是否公共教室"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['isPublic',
              {
                rules: [{ required: true, message: '请选择是否公共教室!' }],
                initialValue: '0'
              }]" :disabled="showOnly">
              <a-select-option value="0">否</a-select-option>
              <a-select-option value="1">是</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="备注"
            :labelCol="{span: 4,offset: 1}"
            :wrapperCol="{span: 18, offset: 1}"
          >
            <a-textarea v-decorator="['note']" :disabled="showOnly"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: ['visible', 'editId'],
  data () {
    return {
      form: this.$form.createForm(this),
      selectMenu: {},
      showOnly: false
    }
  },
  computed: {
    ...mapState({
      TYPE0046: state => state.app['TYPE0046']
    })
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0046')
    this.initSelectMenu()
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll(),
        this.$api.base.campusAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yxList: res[0].data,
          campusList: res[1].data
        }
      })
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    fillForm (data) {
      let keys = Object.keys(this.form.getFieldsValue())
      let obj = {}
      keys.forEach(key => {
        if(data[key]){
          obj[key] = data[key]+""
        }
      })
      this.form.setFieldsValue(obj)
    },
    saveForm () {
      if (this.showOnly) {
        this.$emit('cancel')
      }
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        let apiFn = this.editId ? 'classroomUpdate' : 'classroomAdd'
        values.id = this.editId ? this.editId : ''
        this.$api.cultivate[apiFn](values).then(res => {
          this.$message.success = res.msg
          this.$emit('cancel')
          this.$emit('refresh')
        })
      })
    }
  }
}
</script>

<style>

</style>
